"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Loader2, FileSpreadsheet } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

interface TableViewDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  loading: boolean
  tableData: any
  filteredTableData: any
  selectedFilter: string
  onFilterChange: (filter: string) => void
}

export function TableViewDialog({
  open,
  onOpenChange,
  title,
  loading,
  tableData,
  filteredTableData,
  selectedFilter,
  onFilterChange,
}: TableViewDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          {tableData && (
            <div className="flex items-center gap-4 pt-2">
              <Label htmlFor="filter-select" className="text-sm font-medium">
                数据来源过滤:
              </Label>
              <Select value={selectedFilter} onValueChange={onFilterChange}>
                <SelectTrigger className="w-48">
                  <SelectValue placeholder="选择过滤类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部显示</SelectItem>
                  <SelectItem value="P">P - 采购</SelectItem>
                  <SelectItem value="E">E - 设计</SelectItem>
                  <SelectItem value="C">C - 施工</SelectItem>
                  <SelectItem value="R">R - 运营</SelectItem>
                  <SelectItem value="O">O - 建设</SelectItem>
                </SelectContent>
              </Select>
              <Badge variant="outline" className="ml-auto">
                显示: {filteredTableData?.rows?.length || 0} / {tableData?.rows?.length || 0} 条
              </Badge>
            </div>
          )}
        </DialogHeader>
        <div className="flex-1 overflow-hidden">
          {loading ? (
            <div className="flex items-center justify-center h-64">
              <div className="text-center">
                <Loader2 className="h-8 w-8 animate-spin mx-auto mb-2" />
                <p className="text-muted-foreground">正在加载表格数据...</p>
              </div>
            </div>
          ) : filteredTableData ? (
            <div className="h-[60vh] overflow-auto border rounded-md">
              <Table>
                <TableHeader className="sticky top-0 bg-background z-10">
                  <TableRow>
                    {filteredTableData.headers.map((header: any, index: number) => (
                      <TableHead key={index} className="min-w-[120px] font-semibold border-r">
                        {header}
                      </TableHead>
                    ))}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredTableData.rows.length > 0 ? (
                    filteredTableData.rows.map((row: any, rowIndex: number) => (
                      <TableRow key={rowIndex} className="hover:bg-muted/50">
                        {filteredTableData.headers.map((_: any, cellIndex: number) => (
                          <TableCell key={cellIndex} className="min-w-[120px] border-r">
                            {row[cellIndex]?.toString() || ''}
                          </TableCell>
                        ))}
                      </TableRow>
                    ))
                  ) : (
                    <TableRow>
                      <TableCell colSpan={filteredTableData.headers.length} className="text-center py-8 text-muted-foreground">
                        没有符合过滤条件的数据
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          ) : (
            <div className="flex items-center justify-center h-64">
              <div className="text-center">
                <FileSpreadsheet className="h-16 w-16 mx-auto mb-4 text-muted-foreground opacity-50" />
                <p className="text-muted-foreground">未找到对应的表格数据</p>
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}
